<template>
    <div class="action_contnet">
        <panle title='邀约到课' content="邀约到课列表"></panle>
        <!--筛选条件-->
        <div>
            <div style="margin: 10px">
                <PersButton type="text" size="mini" icon="el-icon-refresh" perms="sys:role:del" label="刷新" @click="refresh()"></PersButton>
            </div>
            <div class="first_table">
                <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading" >
                    <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                    <el-table-column align="center" prop="tutor_nickname" label="邀请助教" header-align="center"></el-table-column>
                    <el-table-column align="center" prop="yaoyuenum" label="被邀请用户数" header-align="center"></el-table-column>
                    <el-table-column align="center" prop="daokenum" label="到课用户数" header-align="center"></el-table-column>
                    <el-table-column align="center" prop="yaoyue_daoke_lv" label="邀请到课率" header-align="center"></el-table-column>
                    <el-table-column align="center" prop="id" label="操作" header-align="center">
                        <template slot-scope="scope" v-if="scope.row.tutor_nickname != '总计'">
                            <PersButton type="text" size="mini" icon="fa  fa-pencil" perms="live:attendance:userInfo" label="查看邀约用户详情" @click="details(scope.row)"></PersButton>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>


<script>


    import Panle from '@/components/Panle';
    import {getyaoyue} from '@/api/live/attendance';
    import PersButton from '@/components/PersButton';
    export default {
        components: {
            Panle,
            PersButton
        },
        data(){
            return {
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                tableData:[],
                loading: false,
                liveId: this.$route.query.liveId,
                multipleSelectioncount: 0,
            }
        },
        created(){

            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            init(){
                let _param = {
                    liveId:this.$route.query.liveId,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                }
                getyaoyue(_param).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            handleSizeChange: function (e) {
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange: function (e) {
                this.pageNumber = e;
                this.init();
            },
            details:function(e){
                this.$router.push({
                    path: '/live/userInfo',
                    query: {
                        liveId:this.$route.query.liveId,
                        tutorId:e.tutor_id,
                        sender:e.sender,
                    }
                })
            }
            
        }
        
    }

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}
</style>